<template>
  <div>
    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />上传（选取文件在上传）
      </div>
      <div class="layout-box-content">
        <span>{{ file.name }}</span>
        <el-upload
          action=""
          accept=".xlsx, .xls"
          :show-file-list="false"
          :multiple="false"
          :on-change="
            (fileData) => {
              file = fileData.raw;
            }
          "
          :auto-upload="false"
        >
          <el-button
            slot="trigger"
            size="size"
            type="primary"
          >选取文件</el-button>
          <el-button
            style="margin-left: 10px"
            size="size"
            type="success"
            @click="handleImportFile"
          >开始导入</el-button>
          <div slot="tip" class="el-upload__tip">
            <span style="color: red">只能上传excel文件，且不超过10MB</span>
          </div>
        </el-upload>
      </div>
    </div>
    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />上传（跟From表单一起提交）
      </div>
      <div class="layout-box-content">
        <el-upload
          action=""
          accept=".jpg, .png, .doc, .xls, .pdf, .docx, .xlsx, .wps"
          :show-file-list="false"
          :multiple="true"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <p class="file-btn" type="file">上传附件<i class="uploading" /></p>
          <div slot="tip" class="el-upload__tip">
            <span style="color: red">文件大小不超过10MB</span>
          </div>
        </el-upload>
        <ul>
          <li v-for="(item,index) in fileList" :key="index">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      file: '',
      fileList: []
    }
  },
  methods: {
    //   上传文件（选取文件在上传）
    handleImportFile() {
      if (this.file === '') {
        this.$message.error('请先选择需要导入的excel文件')
        return false
      }
      if (this.file.size / 1024 / 1024 >= 10) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }
      const data = new FormData()
      data.append('file', this.file)
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      //   this.$api.specialPlanObjects.importByExcelFile(data).then((res) => {
      //     if(res.result === 'success'){
      //       this.showUpload = false
      //       this.$message.success('导入数据成功！')
      //       this.getList()
      //     }
      //   })
    },
    // 上传附件（跟From表单一起提交）
    handleChange(file, fileList) {
      // 上传操作
      if (file.size / 1024 / 1024 >= 10) {
        this.$message.warning('上传文件大小不能超过 10MB!')
        return false
      } else {
        this.fileList.push({
          name: file.name,
          size: `${Math.round(file.size / 1024)}KB`,
          fileId: (this.fileList && this.fileList.length + 1) || 1,
          raw: file.raw
        })
      }
    }
    // 提交时候操作
    // this.fileList.forEach((item) => {
    //     this.datafile.append('files', item.raw)
    // })
  }
}
</script>
<style scoped>
</style>
